<template>
	<view v-if="value" class="modal-box">
		<view class="modal-container" id="modal-version-1">
			<view class="modal version-1">
				<view class="modal-header">
					<h2 class="modal-title floating">学习完成！</h2>
					<p class="modal-subtitle">
						你坚持完成了所有单词的学习，真棒！
					</p>
				</view>

				<view class="stats-container">
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.total || 421}}
						</view>
						<view class="stat-label">总数</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.trueNum || 4}}
						</view>
						<view class="stat-label">正确</view>
					</view>
					<view class="stat-card">
						<view class="stat-value">
							{{wordData && wordData.falseNum || 0}}
						</view>
						<view class="stat-label">遗忘</view>
					</view>
					<view class="stat-card last-card">
						<view class="stat-value">
							{{wordData && wordData.subNum || 421}}
						</view>
						<view class="stat-label">记忆率</view>
					</view>
				</view>

				<view class="message">
					<p class="message-text">
						太棒了！你坚持完成了所有单词的学习！<br />
						<span class="highlight">语言学习是一场马拉松，不是短跑</span>。你今天的努力正在为明天的流利打下基础。
					</p>
				</view>

				<view class="action-buttons">
					<button class="btn btn-continue" @click.stop="continueWord">继续挑战更多单词</button>
					<button class="btn btn-close" @click.stop="endStudy">
						结束学习
					</button>
				</view>
			</view>
			<view class="confetti" style="
		                    left: 70.7529%;
		                    animation-delay: 3.03873s;
		                    background-color: rgb(52, 152, 219);
		                    width: 13.7276px;
		                    height: 13.7276px;
		                "></view>
			<view class="confetti" style="
		                    left: 29.3001%;
		                    animation-delay: 1.21522s;
		                    background-color: rgb(231, 76, 60);
		                    width: 12.3951px;
		                    height: 12.3951px;
		                "></view>
			<view class="confetti" style="
		                    left: 76.338%;
		                    animation-delay: 3.45757s;
		                    background-color: rgb(241, 196, 15);
		                    width: 8.92573px;
		                    height: 8.92573px;
		                "></view>
			<view class="confetti" style="
		                    left: 35.1322%;
		                    animation-delay: 3.64096s;
		                    background-color: rgb(46, 204, 113);
		                    width: 13.7015px;
		                    height: 13.7015px;
		                "></view>
			<view class="confetti" style="
		                    left: 74.1804%;
		                    animation-delay: 4.80717s;
		                    background-color: rgb(241, 196, 15);
		                    width: 9.32199px;
		                    height: 9.32199px;
		                "></view>
			<view class="confetti" style="
		                    left: 29.4733%;
		                    animation-delay: 4.98134s;
		                    background-color: rgb(46, 204, 113);
		                    width: 8.52435px;
		                    height: 8.52435px;
		                "></view>
			<view class="confetti" style="
		                    left: 67.7914%;
		                    animation-delay: 4.52888s;
		                    background-color: rgb(52, 152, 219);
		                    width: 7.75572px;
		                    height: 7.75572px;
		                "></view>
			<view class="confetti" style="
		                    left: 97.151%;
		                    animation-delay: 0.4893s;
		                    background-color: rgb(155, 89, 182);
		                    width: 8.34597px;
		                    height: 8.34597px;
		                "></view>
			<view class="confetti" style="
		                    left: 57.037%;
		                    animation-delay: 4.50937s;
		                    background-color: rgb(46, 204, 113);
		                    width: 12.7773px;
		                    height: 12.7773px;
		                "></view>
			<view class="confetti" style="
		                    left: 97.5091%;
		                    animation-delay: 0.418387s;
		                    background-color: rgb(231, 76, 60);
		                    width: 8.90892px;
		                    height: 8.90892px;
		                "></view>
			<view class="confetti" style="
		                    left: 2.60937%;
		                    animation-delay: 4.28693s;
		                    background-color: rgb(155, 89, 182);
		                    width: 10.1047px;
		                    height: 10.1047px;
		                "></view>
			<view class="confetti" style="
		                    left: 32.3256%;
		                    animation-delay: 2.34406s;
		                    background-color: rgb(52, 152, 219);
		                    width: 13.6613px;
		                    height: 13.6613px;
		                "></view>
			<view class="confetti" style="
		                    left: 84.0097%;
		                    animation-delay: 2.36837s;
		                    background-color: rgb(231, 76, 60);
		                    width: 12.5891px;
		                    height: 12.5891px;
		                "></view>
			<view class="confetti" style="
		                    left: 8.30017%;
		                    animation-delay: 1.04523s;
		                    background-color: rgb(231, 76, 60);
		                    width: 14.2334px;
		                    height: 14.2334px;
		                "></view>
			<view class="confetti" style="
		                    left: 46.9411%;
		                    animation-delay: 0.893736s;
		                    background-color: rgb(155, 89, 182);
		                    width: 11.7352px;
		                    height: 11.7352px;
		                "></view>
			<view class="confetti" style="
		                    left: 4.94031%;
		                    animation-delay: 3.29638s;
		                    background-color: rgb(241, 196, 15);
		                    width: 5.94294px;
		                    height: 5.94294px;
		                "></view>
			<view class="confetti" style="
		                    left: 60.4132%;
		                    animation-delay: 3.63874s;
		                    background-color: rgb(46, 204, 113);
		                    width: 14.9001px;
		                    height: 14.9001px;
		                "></view>
			<view class="confetti" style="
		                    left: 86.4839%;
		                    animation-delay: 2.61398s;
		                    background-color: rgb(241, 196, 15);
		                    width: 11.209px;
		                    height: 11.209px;
		                "></view>
			<view class="confetti" style="
		                    left: 21.405%;
		                    animation-delay: 1.33255s;
		                    background-color: rgb(52, 152, 219);
		                    width: 8.88012px;
		                    height: 8.88012px;
		                "></view>
			<view class="confetti" style="
		                    left: 60.8954%;
		                    animation-delay: 1.22218s;
		                    background-color: rgb(52, 152, 219);
		                    width: 10.1781px;
		                    height: 10.1781px;
		                "></view>
			<view class="confetti" style="
		                    left: 37.9982%;
		                    animation-delay: 1.96149s;
		                    background-color: rgb(231, 76, 60);
		                    width: 5.2942px;
		                    height: 5.2942px;
		                "></view>
			<view class="confetti" style="
		                    left: 3.40594%;
		                    animation-delay: 4.93113s;
		                    background-color: rgb(231, 76, 60);
		                    width: 11.0378px;
		                    height: 11.0378px;
		                "></view>
			<view class="confetti" style="
		                    left: 33.1062%;
		                    animation-delay: 3.33329s;
		                    background-color: rgb(241, 196, 15);
		                    width: 8.6688px;
		                    height: 8.6688px;
		                "></view>
			<view class="confetti" style="
		                    left: 61.271%;
		                    animation-delay: 0.43781s;
		                    background-color: rgb(231, 76, 60);
		                    width: 12.9842px;
		                    height: 12.9842px;
		                "></view>
			<view class="confetti" style="
		                    left: 72.1076%;
		                    animation-delay: 3.02709s;
		                    background-color: rgb(241, 196, 15);
		                    width: 9.51097px;
		                    height: 9.51097px;
		                "></view>
			<view class="confetti" style="
		                    left: 86.4493%;
		                    animation-delay: 1.35015s;
		                    background-color: rgb(231, 76, 60);
		                    width: 10.7467px;
		                    height: 10.7467px;
		                "></view>
			<view class="confetti" style="
		                    left: 71.7105%;
		                    animation-delay: 1.83673s;
		                    background-color: rgb(231, 76, 60);
		                    width: 9.11552px;
		                    height: 9.11552px;
		                "></view>
			<view class="confetti" style="
		                    left: 8.7953%;
		                    animation-delay: 2.30146s;
		                    background-color: rgb(52, 152, 219);
		                    width: 12.5811px;
		                    height: 12.5811px;
		                "></view>
			<view class="confetti" style="
		                    left: 24.0387%;
		                    animation-delay: 4.6432s;
		                    background-color: rgb(241, 196, 15);
		                    width: 12.1906px;
		                    height: 12.1906px;
		                "></view>
			<view class="confetti" style="
		                    left: 15.8994%;
		                    animation-delay: 2.01141s;
		                    background-color: rgb(155, 89, 182);
		                    width: 8.46707px;
		                    height: 8.46707px;
		                "></view>
			<view class="confetti" style="
		                    left: 42.4842%;
		                    animation-delay: 3.70332s;
		                    background-color: rgb(241, 196, 15);
		                    width: 14.8914px;
		                    height: 14.8914px;
		                "></view>
			<view class="confetti" style="
		                    left: 8.97371%;
		                    animation-delay: 4.22718s;
		                    background-color: rgb(155, 89, 182);
		                    width: 11.1699px;
		                    height: 11.1699px;
		                "></view>
			<view class="confetti" style="
		                    left: 1.23405%;
		                    animation-delay: 1.5121s;
		                    background-color: rgb(231, 76, 60);
		                    width: 13.0174px;
		                    height: 13.0174px;
		                "></view>
			<view class="confetti" style="
		                    left: 64.9821%;
		                    animation-delay: 0.693866s;
		                    background-color: rgb(46, 204, 113);
		                    width: 10.477px;
		                    height: 10.477px;
		                "></view>
			<view class="confetti" style="
		                    left: 61.1236%;
		                    animation-delay: 0.95939s;
		                    background-color: rgb(46, 204, 113);
		                    width: 6.41604px;
		                    height: 6.41604px;
		                "></view>
			<view class="confetti" style="
		                    left: 66.3769%;
		                    animation-delay: 4.85999s;
		                    background-color: rgb(52, 152, 219);
		                    width: 7.84529px;
		                    height: 7.84529px;
		                "></view>
			<view class="confetti" style="
		                    left: 28.8607%;
		                    animation-delay: 2.88379s;
		                    background-color: rgb(155, 89, 182);
		                    width: 8.68817px;
		                    height: 8.68817px;
		                "></view>
			<view class="confetti" style="
		                    left: 94.819%;
		                    animation-delay: 4.69619s;
		                    background-color: rgb(241, 196, 15);
		                    width: 5.94595px;
		                    height: 5.94595px;
		                "></view>
			<view class="confetti" style="
		                    left: 22.083%;
		                    animation-delay: 2.50493s;
		                    background-color: rgb(241, 196, 15);
		                    width: 12.7866px;
		                    height: 12.7866px;
		                "></view>
			<view class="confetti" style="
		                    left: 34.1197%;
		                    animation-delay: 0.936243s;
		                    background-color: rgb(52, 152, 219);
		                    width: 8.98986px;
		                    height: 8.98986px;
		                "></view>
			<view class="confetti" style="
		                    left: 64.4211%;
		                    animation-delay: 3.23157s;
		                    background-color: rgb(155, 89, 182);
		                    width: 12.7997px;
		                    height: 12.7997px;
		                "></view>
			<view class="confetti" style="
		                    left: 48.7644%;
		                    animation-delay: 2.93752s;
		                    background-color: rgb(155, 89, 182);
		                    width: 12.7056px;
		                    height: 12.7056px;
		                "></view>
			<view class="confetti" style="
		                    left: 24.0166%;
		                    animation-delay: 0.792476s;
		                    background-color: rgb(231, 76, 60);
		                    width: 12.0466px;
		                    height: 12.0466px;
		                "></view>
			<view class="confetti" style="
		                    left: 58.2225%;
		                    animation-delay: 3.75787s;
		                    background-color: rgb(241, 196, 15);
		                    width: 5.25038px;
		                    height: 5.25038px;
		                "></view>
			<view class="confetti" style="
		                    left: 72.3488%;
		                    animation-delay: 2.71386s;
		                    background-color: rgb(155, 89, 182);
		                    width: 12.3477px;
		                    height: 12.3477px;
		                "></view>
			<view class="confetti" style="
		                    left: 35.0294%;
		                    animation-delay: 1.04823s;
		                    background-color: rgb(52, 152, 219);
		                    width: 7.91817px;
		                    height: 7.91817px;
		                "></view>
			<view class="confetti" style="
		                    left: 44.3701%;
		                    animation-delay: 2.70947s;
		                    background-color: rgb(241, 196, 15);
		                    width: 7.32515px;
		                    height: 7.32515px;
		                "></view>
			<view class="confetti" style="
		                    left: 2.39808%;
		                    animation-delay: 1.46059s;
		                    background-color: rgb(52, 152, 219);
		                    width: 5.42838px;
		                    height: 5.42838px;
		                "></view>
			<view class="confetti" style="
		                    left: 89.1117%;
		                    animation-delay: 2.79853s;
		                    background-color: rgb(241, 196, 15);
		                    width: 6.41223px;
		                    height: 6.41223px;
		                "></view>
			<view class="confetti" style="
		                    left: 99.4871%;
		                    animation-delay: 2.34028s;
		                    background-color: rgb(155, 89, 182);
		                    width: 13.5566px;
		                    height: 13.5566px;
		                "></view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			wordData: {
				type: Object,
				default: () => null
			}
		},
		computed: {
			commonData() {
				return this.$store.state.commonData
			},
		},
		data() {
			return {
				keyWord: 'xiaoxue',
				keyIndex: 0,
			}
		},
		created() {
			this.keyIndex = Math.floor(Math.random() * 6);
		},
		mounted() {},
		methods: {
			showModal() {},
			closeModal() {},
			continueWord() {
				this.$emit('input', false)
				this.$emit('continueWord')
			},
			endStudy() {
				this.$emit('input', false)
				this.$emit('endStudy')
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url("../modal.css");

	.modal-box {
		position: fixed;
		z-index: 10;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(33, 33, 33, 0.5);
	}
</style>